<section id="attendees-view" class="mainbar" data-ng-controller="Attendees as vm">
    <section class="matter">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <input class="input-medium search-query"
                           data-ng-model="vm.attendeeSearch"
                           data-ng-keyup="vm.search($event)"
                           placeholder="live search...">
                </div>
                <div class="col-sm-8">
                    <div class="btn-group pull-right">
                        <a class="btn btn-info btn-form-md"
                           data-ng-click="vm.refresh()"><i class="fa fa-refresh"></i><span
                                class="text">Refresh</span></a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="widget wgreen col-sm-12">
                    <div data-cc-widget-header title="{{vm.title}}"
                         subtitle="{{vm.attendeeFilteredCount}} / {{vm.attendeeCount}}"
                         right-text="Page {{vm.paging.currentPage}} of {{vm.paging.pageCount}}"></div>

                    <div class="widget-content user">
                        <div>
                            <pagination boundary-links="true"
                                        ng-change="vm.pageChanged()"
                                        total-items="vm.attendeeFilteredCount"
                                        items-per-page="vm.paging.pageSize"
                                        ng-model="vm.paging.currentPage"
                                        max-size="vm.paging.maxPagesToShow"
                                        class="pagination-small"
                                        previous-text="Prev"
                                        next-text="Next"
                                        first-text="First"
                                        last-text="Last"></pagination>
                            <div class="clearfix"></div>
                        </div>

                        <div class="padd list-flow fader-animation" data-ng-repeat="a in vm.attendees track by a.id">
                            <div class="user">
                                <img data-cc-img-person="{{a.imageSource}}" class="img-thumbnail stacked"/>

                                <div class="name-stack">
                                    <h5>{{a.firstName}}</h5>
                                    <h5>{{a.lastName}}</h5>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="widget-foot">
                        <div class="clearfix"></div>
                    </div>
            </div>
        </div>
    </section>
</section>
